import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import store from './store'
// 引入Elementui
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// import VueVerifyPlugin from 'vue-verify-plugin';
import VueApexCharts from 'vue3-apexcharts';
import {datetimeObj2str, timestamp2time} from './util/format.js'

import './assets/styles/iconfont.css'
import './assets/styles/swagger.css'
import './assets/styles/tree.css'
import './assets/styles/home.css'
import './assets/styles/reports.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'


import * as api from './restful/api'

import mitt from "mitt"


// element-plus 报错 ResizeObserver loop limit exceeded 解决1
const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  }
}
// element-plus 报错 ResizeObserver loop limit exceeded 解决2
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
}



const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.config.globalProperties.$api = api
app.provide('$axios', axios)

app.config.silent = true
app.config.globalProperties.$bus = new mitt();

app.config.globalProperties.$localStorage = {  // 这里使用 globalProperties 添加自定义全局属性
  get(key) {
    return localStorage.getItem(key);
  },
  set(key, value) {
    localStorage.setItem(key, value);
  },
};

app.mixin({
  created() {
    // 在 Vue 3 中，可以使用 sessionStorage 直接访问全局属性
    if (sessionStorage.getItem('token') === null) {
      sessionStorage.setItem('token', '');
    }
    if (sessionStorage.getItem('user') === null) {
      sessionStorage.setItem('user', '');
    }
    if (sessionStorage.getItem('routerName') === null) {
      sessionStorage.setItem('routerName', 'ProjectList');
    }

    if (sessionStorage.getItem('is_superuser') === null) {
      sessionStorage.setItem('is_superuser', false);
    }
    if (sessionStorage.getItem('show_hosts') === null) {
      sessionStorage.setItem('show_hosts', false);
    }

    // 在 Vue 3 中，使用 this.$store 直接访问 store
    this.$store.commit('isLogin', sessionStorage.getItem('token'));
    this.$store.commit('setUser', sessionStorage.getItem('user'));
    this.$store.commit('setRouterName', sessionStorage.getItem('routerName'));
    this.$store.commit('setIsSuperuser', sessionStorage.getItem('is_superuser'));
    this.$store.commit('setShowHots', sessionStorage.getItem('show_hosts'));
  },
});
app.config.globalProperties.$datetimeFormat = datetimeObj2str;
app.config.globalProperties.$timestampToTime = timestamp2time;
app.use(ElementPlus, {
  locale: zhCn
})
app.use(router).use(store).use(ElementPlusIconsVue).use(VueApexCharts).mount('#app')
app.component("ApexCharts", VueApexCharts)













